<template>
  <!-- 组件根标签 -->
  <div class="loginye">
    <!-- <h1>我是登录页</h1> -->

    <!-- 1.头部导航栏 -->
    <hmnavbar title="登录" @back="$router.push('/find')"></hmnavbar>
    <!-- 2.身体部分 -->
    <div class="formbody">
      <h3>你好!请登录</h3>
      <!-- 表单 -->
      <van-form @submit="login" ref="loginform">
        <van-field
          v-model="user.phone"
          type="digit"
          name="phone"
          placeholder="请输入手机号"
          :rules="rules.phone"
        >
          <template #left-icon> <i class="iconfont iconbianzu1 "></i> </template
        ></van-field>
        <van-field
          v-model="user.code"
          type="digit"
          name="code"
          placeholder="请输入验证码"
          :rules="rules.code"
        >
          <template #left-icon>
            <i class="iconfont iconyanzhengma "></i>
          </template>
          <template #button>
            <span v-if="delayTime === 6" class="getcode" @click="yanzheng">{{
              btnText
            }}</span>
            <span v-else>{{ delayTime }}S 后重试</span>
          </template></van-field
        >
        <div class="xieyi">
          登录即同意 <span>《用户使用协议》</span> 和<span>《隐私协议》</span>
        </div>
        <van-button size="large" color="#e40137" class="sure">确定</van-button>
      </van-form>
    </div>
  </div>
</template>
<script>
// 导入需要发送请求接口的方法
import { sendCode, login } from '../../api/login'
// 导入处理token的工具包
import { setToken } from './../../utils/token'
// 导入封装好的导航栏组件hmnavbar
// import hmnavbar from './../../components/hmnavbar.vue'
export default {
  name: 'Login',
  data () {
    return {
      user: {
        phone: '',
        code: ''
      },
      rules: {
        phone: [
          { required: true, message: '一定要输入手机号' },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请输入正确格式'
          }
        ],
        code: [
          { required: true, message: '一定要输入验证码' },
          {
            pattern: /^\d{4}$/,
            message: '请输入正确格式的验证码'
          }
        ]
      },

      btnText: '获取验证码',
      delayTime: 6 // 获取验证码的倒计时
    }
  },

  // components: {
  //   hmnavbar
  // },

  methods: {
    // 点击确定按钮
    async login () {
      console.log('点击了确定按钮了')

      try {
        const res = await login({
          mobile: this.user.phone,
          code: this.user.code
        })
        console.log(res)

        // 给个提示!!
        this.$toast({
          type: 'loading',
          message: '登陆中........',
          duration: 0
        })
        setTimeout(() => {
          // 1.保存登陆成功后返回的token
          setToken('token', res.data.data.jwt)
          // 2.保存用户信息  改变用户登录的状态
          this.$store.commit('setUser', res.data.data.user)
          this.$store.commit('setIslogin', true)

          // 3.跳转到页面
          // console.log(this.$route)
          // 拿到刷题强迫跳到登录页所携带的刷题的参数
          const _redirect = this.$route.query._redirect
          if (_redirect) {
            this.$router.push(_redirect)
          } else {
            this.$router.push('/home')
          }

          // 清除登陆中......提示
          this.$toast().clear()
        }, 500)
      } catch {
        console.log('对不起!!服务器发生错误了')
      }
    },

    // 点击获取验证码
    yanzheng () {
      // 格式验证
      this.$refs.loginform.validate(['phone']).then(async () => {
        console.log('手机号格式验证成功')
        this.$toast({
          type: 'loading',
          message: '获取中.........'
        })

        // 设置定时器,进行倒计时
        const dingshi = setInterval(() => {
          this.delayTime--
          if (this.delayTime <= 0) {
            clearInterval(dingshi)
            this.delayTime = 6
          }
        }, 1000)
        try {
          // 发送获取验证码的接口请求
          const res = await sendCode({
            mobile: this.user.phone
          })
          // 成功回调
          console.log(res)
          this.$toast({
            message: '验证码:' + res.data.data
          })
          this.user.code = res.data.data // 自己懒,不想手动写验证码,直接给填充到验证码的位置
        } catch {
          console.log('对不起!!服务器发生错误了')
        }
      })
    }
  }
}
</script>
<style lang="less">
.loginye {
  .formbody {
    padding: 25px;
    h3 {
      margin: 50px 0;
    }

    .xieyi {
      margin-top: 15px;
      span {
        color: #4ccce0;
      }
    }
    .sure {
      border-radius: 30px;
      margin: 44px 0;
    }
    .xieyi {
      font-size: 12px;
    }
    .getcode {
      color: #66d3e4;
      font-size: 16px;
    }
    .van-field__body {
      margin-left: 10px;
    }
  }
}
</style>
